<template>
  <a-result
      status="error"
      title="Payment failed"
      sub-title="Please go to the order page to pay again"
  >
    <template #extra>
      <a-button @click="toOrderInfo" key="console" type="primary">Go to the order page</a-button>
      <a-button @click="toMainPage">Return to home page</a-button>
    </template>

    <div class="desc">
      <p style="font-size: 16px">
        <strong>Are you sure your order has been paid? Please contact the staff</strong>
      </p>
<!--      <p>-->
<!--        Telephone number:-->
<!--        <a href="tel: 13313131313" style="color: #1890ff;text-underline: none;text-decoration: none">13313131313</a>-->
<!--      </p>-->
<!--      <p>-->
<!--        Email address:-->
<!--        <a href="mailto: 123456789@163.com" style="color: #1890ff;text-underline: none;text-decoration: none">123456789@163.com</a>-->
<!--      </p>-->
    </div>


  </a-result>
</template>

<script lang="ts">
import {defineComponent, ref, reactive, computed, watch, onMounted} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import { CloseCircleOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  setup(props, context) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();

    const toOrderInfo=()=>{
      if(route.query!=null&&route.query.id!=null){
        router.push({
          path:'/user/order/'+route.query.id
        })
      }else {
        router.push({
          path:'/'
        })
      }
    }

    const toMainPage=()=>{
      router.push({
        path:'/'
      })
    }

    return {
      toOrderInfo,
      toMainPage
    }
  }
})
</script>

<style scoped lang="less">
.desc p {
  margin-bottom: 1em;

}
</style>
<style lang="less">
.ant-result{
  @media screen and (max-width: 768px){
    padding: 48px 10px!important;
  }
  @media screen and (max-width: 425px){
    padding: 48px 0!important;
  }
}
</style>
